/**
 * 按钮悬浮提示指令
 * 用法：
 * 1. 图标按钮: v-tooltip="'删除'"
 * 2. 带文本按钮: v-tooltip:append="'删除按钮'" (会将文本与按钮文本拼接)
 */

const tooltip = {
  bind(el, binding) {
    // 判断是否有提示内容
    if (!binding.value) return;
    
    // 获取按钮展示的文本
    const buttonText = el.textContent ? el.textContent.trim() : '';
    
    // 判断是否追加文本模式
    const isAppend = binding.arg === 'append';
    
    // 设置提示内容
    let tooltipText = binding.value;
    if (isAppend && buttonText) {
      tooltipText = `${buttonText} (${tooltipText})`;
    }
    
    // 根据el-button原有的属性判断按钮类型
    const hasBtnText = el.textContent && el.textContent.trim() !== '';
    
    // 处理图标按钮，通过在父元素上添加tooltip
    if (el.classList.contains('el-button') && !hasBtnText) {
      // 如果不存在父级tooltip或已经应用过此指令，创建tooltip包装
      if (!el.parentElement || !el.parentElement.classList.contains('el-tooltip')) {
        // 创建tooltip包装元素
        const tooltip = document.createElement('el-tooltip');
        tooltip.className = 'item';
        tooltip.setAttribute('effect', 'dark');
        tooltip.setAttribute('content', tooltipText);
        tooltip.setAttribute('placement', 'top');
        
        // 替换原按钮
        const parent = el.parentElement;
        parent.insertBefore(tooltip, el);
        tooltip.appendChild(el);
      }
    } else if (el.classList.contains('el-button')) {
      // 对带文本的按钮，直接设置title属性
      el.setAttribute('title', tooltipText);
    }
  }
};

export default tooltip; 